<template>
  <div class="hourglass-container">
    <div class="hourglass" :class="{ running: isRunning, flipping: isFlipping }">
      <!-- 上半部分 -->
      <div class="hourglass-top">
        <div class="sand-container">
          <div 
            class="sand" 
            :class="{ resetting: isFlipping }"
            :style="{ height: topSandHeight + '%' }"
          ></div>
        </div>
      </div>
      
      <!-- 中间连接部分 -->
      <div class="hourglass-middle">
        <div class="sand-stream" v-if="isRunning"></div>
      </div>
      
      <!-- 下半部分 -->
      <div class="hourglass-bottom">
        <div class="sand-container">
          <div 
            class="sand" 
            :class="{ resetting: isFlipping }"
            :style="{ height: bottomSandHeight + '%' }"
          ></div>
        </div>
      </div>
      
      <!-- 外框 -->
      <div class="hourglass-frame">
        <div class="frame-top"></div>
        <div class="frame-middle"></div>
        <div class="frame-bottom"></div>
      </div>
    </div>
    
    <!-- 控制按钮 -->
    <div class="controls">
      <el-button 
        type="primary" 
        @click="startTimer"
        :disabled="isRunning"
        icon="VideoPlay"
      >
        开始
      </el-button>
      <el-button 
        type="warning" 
        @click="pauseTimer"
        :disabled="!isRunning"
        icon="VideoPause"
      >
        暂停
      </el-button>
      <el-button 
        type="info" 
        @click="resetTimer"
        :disabled="isFlipping"
        icon="RefreshRight"
        :loading="isFlipping"
      >
        {{ isFlipping ? '重置中...' : '重置' }}
      </el-button>
    </div>
    
    <!-- 时间显示 -->
    <div class="time-display">
      <div class="time-info">
        <span class="label">剩余时间:</span>
        <span class="time">{{ formatTime(remainingTime) }}</span>
      </div>
      <div class="progress-info">
        <span class="label">进度:</span>
        <span class="progress">{{ Math.round((1 - remainingTime / totalTime) * 100) }}%</span>
      </div>
    </div>
    
    <!-- 设置面板 -->
    <div class="settings">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="setting-item">
            <label>总时间 (秒):</label>
            <el-input-number
              v-model="totalTime"
              :min="1"
              :max="3600"
              :disabled="isRunning"
              @change="resetTimer"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="setting-item">
            <label>沙子颜色:</label>
            <el-color-picker v-model="sandColor" @change="updateSandColor" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hourglass',
  data() {
    return {
      isRunning: false,
      isFlipping: false, // 新增的旋转状态
      totalTime: 60, // 总时间（秒）
      remainingTime: 60, // 剩余时间（秒）
      timer: null,
      sandColor: '#daa520', // 沙子颜色（金色）
      startTime: null,
      pausedTime: 0
    }
  },
  computed: {
    // 上半部分沙子高度百分比
    topSandHeight() {
      return (this.remainingTime / this.totalTime) * 100
    },
    // 下半部分沙子高度百分比
    bottomSandHeight() {
      return ((this.totalTime - this.remainingTime) / this.totalTime) * 100
    }
  },
  methods: {
    // 开始计时
    startTimer() {
      if (this.remainingTime <= 0) {
        this.resetTimer()
      }
      
      this.isRunning = true
      this.startTime = Date.now() - this.pausedTime
      
      this.timer = setInterval(() => {
        const elapsed = Date.now() - this.startTime
        this.remainingTime = Math.max(0, this.totalTime - elapsed / 1000)
        
        if (this.remainingTime <= 0) {
          this.completeTimer()
        }
      }, 100)
    },
    
    // 暂停计时
    pauseTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      this.isRunning = false
      this.pausedTime = Date.now() - this.startTime
    },
    
    // 重置计时器
    resetTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      
      // 触发旋转动画
      this.isFlipping = true
      
      // 旋转动画完成后重置数据
      setTimeout(() => {
        this.isRunning = false
        this.remainingTime = this.totalTime
        this.pausedTime = 0
        this.startTime = null
        
        // 动画结束
        setTimeout(() => {
          this.isFlipping = false
        }, 100)
      }, 800) // 等待旋转动画完成
    },
    
    // 完成计时
    completeTimer() {
      this.pauseTimer()
      this.$message.success('计时完成！')
      
      // 播放提示音（可选）
      this.playNotificationSound()
    },
    
    // 播放提示音
    playNotificationSound() {
      try {
        const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+L0u2ka')
        audio.play().catch(() => {
          // 忽略音频播放错误
        })
      } catch (e) {
        // 忽略音频相关错误
      }
    },
    
    // 格式化时间显示
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = Math.floor(seconds % 60)
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
    },
    
    // 更新沙子颜色
    updateSandColor() {
      document.documentElement.style.setProperty('--sand-color', this.sandColor)
    }
  },
  
  mounted() {
    this.updateSandColor()
  },
  
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped lang="scss">
:root {
  --sand-color: #daa520;
}

.hourglass-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  margin: 0 auto;
}

.hourglass {
  position: relative;
  width: 180px;
  height: 280px;
  margin-bottom: 30px;
  transition: transform 0.3s ease;
  
  &.running {
    animation: gentle-shake 4s infinite ease-in-out;
  }
  
  &.flipping {
    animation: flip-hourglass 0.8s ease-in-out;
  }
}

@keyframes gentle-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(0.5deg); }
  75% { transform: rotate(-0.5deg); }
}

@keyframes flip-hourglass {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(180deg) scale(1);
  }
}

@keyframes sand-shimmer {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    opacity: 0.7;
    filter: brightness(1.3);
  }
  50% {
    opacity: 0.5;
    filter: brightness(1.5);
  }
  75% {
    opacity: 0.7;
    filter: brightness(1.3);
  }
}

.hourglass-top,
.hourglass-bottom {
  position: absolute;
  width: 140px;
  height: 115px;
  left: 20px;
  overflow: hidden;
  
  .sand-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    
    .sand {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: linear-gradient(180deg, #daa520 0%, #b8860b 50%, #8b7355 100%);
      transition: height 0.1s ease-out;
      border-radius: 0;
        
      &.resetting {
        animation: sand-shimmer 0.8s ease-in-out;
      }
    }
  }
}

.hourglass-top {
  top: 0;
  clip-path: polygon(25% 0%, 75% 0%, 58% 100%, 42% 100%);
  
  .sand {
    clip-path: polygon(25% 0%, 75% 0%, 58% 100%, 42% 100%);
    border-radius: 0;
  }
}

.hourglass-bottom {
  bottom: 0;
  clip-path: polygon(42% 0%, 58% 0%, 75% 100%, 25% 100%);
  
  .sand-container {
    top: 0;
    
    .sand {
      top: 0;
      bottom: auto;
      clip-path: polygon(42% 0%, 58% 0%, 75% 100%, 25% 100%);
      border-radius: 0;
    }
  }
}

.hourglass-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 50px;
  
  .sand-stream {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 50px;
    background: linear-gradient(180deg, #daa520 0%, transparent 100%);
    animation: sand-fall 1.5s infinite linear;
  }
}

@keyframes sand-fall {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

.hourglass-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  .frame-top,
  .frame-bottom {
    position: absolute;
    width: 150px;
    height: 125px;
    left: 15px;
    border: 6px solid #2c1810;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
    box-shadow: 
      inset 0 2px 5px rgba(255,255,255,0.3),
      inset 0 -2px 5px rgba(0,0,0,0.3),
      0 4px 10px rgba(0,0,0,0.2);
  }
  
  .frame-top {
    top: -10px;
    clip-path: polygon(20% 5%, 80% 5%, 65% 95%, 35% 95%);
  }
  
  .frame-bottom {
    bottom: -10px;
    clip-path: polygon(35% 5%, 65% 5%, 80% 95%, 20% 95%);
  }
  
  .frame-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 60px;
    border: 6px solid #2c1810;
    border-top: none;
    border-bottom: none;
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
    box-shadow: 
      inset 2px 0 3px rgba(255,255,255,0.3),
      inset -2px 0 3px rgba(0,0,0,0.3);
  }
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.time-display {
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  min-width: 200px;
  text-align: center;
  
  .time-info,
  .progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-weight: bold;
      color: #666;
    }
    
    .time {
      font-family: 'Courier New', monospace;
      font-size: 18px;
      font-weight: bold;
      color: #2c3e50;
    }
    
    .progress {
      font-weight: bold;
      color: #27ae60;
    }
  }
}

.settings {
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 10px;
  width: 100%;
  
  .setting-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    
    label {
      font-weight: bold;
      color: #666;
      font-size: 14px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .hourglass-container {
    max-width: 350px;
    padding: 15px;
  }
  
  .hourglass {
    width: 150px;
    height: 230px;
  }
  
  .hourglass-top,
  .hourglass-bottom {
    width: 115px;
    height: 95px;
    left: 17px;
  }
  
  .hourglass-frame {
    .frame-top,
    .frame-bottom {
      width: 125px;
      height: 105px;
      left: 12px;
      border-width: 4px;
    }
    
    .frame-middle {
      width: 20px;
      height: 50px;
      border-width: 4px;
    }
  }
  
  .controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .settings {
    .el-row {
      .el-col {
        margin-bottom: 15px;
      }
    }
  }
}
</style>